// 抽象可复用逻辑
import { ref } from 'vue'
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
export function useObserver (apiFn) {
  // 基础使用 监听视口函数
  const target = ref(null)
  console.log('当前传入的target的参数', target) // target拿到的文本节点text 不是element
  // 调用方法
  // 1. stop 可执行的方法  用来停止对于目标元素的监听
  // 2. target 要监听的一个对象  dom对象 组件实例对象
  // 3. isIntersecting  布尔值 代表当前监听的元素对象是否进入到视口区域 进来就为true 出去就false
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting
      // 可以使用isIntersecting变量的是否为true来控制ajax请求是否要发起
      console.log(isIntersecting)
      if (isIntersecting) {
        apiFn()
        // 第一次请求成功发起之后立刻停止监听
        stop()
      }
    },
    {
      // 用来控制目标target进入视口区域的比例
      // 0 - 1  数值越大要求进入到视口区域的面积越大 才会触发回调
      //        数值越小要求进入到视口区域的面积越小 才会触发回调
      threshold: 0.1
    }
  )

  return {
    target
  }
}

// 所谓的逻辑复用其实就是找到重复代码的地方 再找到可变的地方 把可变的东西抽象成一个参数
// setup函数组合的永远是响应式的状态数据

/**
 * 核心逻辑：每隔一秒钟 对countTime减1  (定时器 在定时器回调中书写减逻辑)
 */
export function useCountDown (time) {
  // const timer = setInterval(() => {
  //   console.log('我是一个自定义的定时器')
  // }, 1000)

  // onUnmounted(() => {
  //   clearInterval(timer)
  // })

  // 未经过额外清除的动作的自定义定时器 在组件销毁之后依旧常驻内存需要我们手动清除
  // 清除定时器的逻辑放到 组件销毁的生命周期钩子函数中进行 destroyed  onUnmounted

  const countTime = ref(0)
  // resume：可执行的函数 只要执行这个函数 我们自己的逻辑就会每隔一秒执行一次
  // pause：可执行的函数 只要执行这个函数 我们每隔一秒执行的逻辑会立刻暂停
  const { resume, pause } = useIntervalFn(() => {
    /* your function */
    if (countTime.value === 0) {
      pause()
    } else {
      countTime.value--
    }
    console.log('我是封装好的定时器')
  }, 1000)

  function start () {
    // 开始倒计时逻辑
    countTime.value = time
    resume()
  }
  return {
    countTime,
    start,
    pause
  }
}

/**
 * 1. 按照需求 按照使用的方式把函数的入参 和 return值都定义好
 * 2. 想清楚核心逻辑：每隔一秒钟对于数据做一个自减操作  定时器 回调中做自减逻辑
 * 3. useIntervalFn 可以提供 `每隔一秒钟执行一个你自己逻辑` 的定时器 并且给到我们俩个方法 pause resume
 */
